<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s//element-plus/2.1.4/index.css">
<script src="../../s/vue/3.2.37/vue.global.prod.js"></script>
<script src="../../s/element-plus/2.1.4/index.full.min.js"></script>
<title>MessageBox 弹框</title>
<style type="text/css">
[v-cloak] {
	display: none !important;
}
</style>
</head>
<body>
	<div id="app" v-cloak>
		<button is="vue:el-button" @click="open">Click to open the Message Box</button>
	</div>
	<script>
		Vue.createApp({
			data : function() {
				return {};
			},
			methods : {
				open : function() {
					ElementPlus.ElMessageBox.alert('This is a message', 'Title', {
						confirmButtonText : 'OK',
						callback : function(action) {
							ElementPlus.ElMessage({
								type : 'info',
								message : `action: ${action}`,
							})
						},
					});
				}
			}
		}).use(ElementPlus).mount("#app");
	</script>
</body>
</html>